Vue Js Change Dynamically Webpage Content : By using a virtual DOM, Vue.js is able to efficiently render large amounts of content inside an element quickly and smoothly. The v-html directive binds an element’s innerHTML to an expression, allowing users to display dynamic HTML content. Using the Vue.js library, v-html allows us to add content to our webpage that can be changed dynamically based on user input or other variables. In this tutorial, we will learn how to use v-html to add dynamic content to a webpage. We will start by learning how to use the v-html directive in Vue.js, followed by a look at the examples below of how to render HTML content on a page with v-html
How to render dynamic content inside html element in Vue Js
In Vue.js, dynamic content can be rendered inside HTML elements using the v-html directive. This can be incredibly useful when displaying content that needs to be frequently updated or for applications that require dynamic content rendered to the screen
v-html sets the innerHTML property of the element, which means it will replace any existing content and overwrite it
Vue Js Use of v-html Attribute | Example
<div id="app">
<div v-html="dynamicTitle"></div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
dynamicTitle: '<h1>Font Awesome Icons</h1>'
}
},
});
</script>
Output of above example
